<template>


    <div style="height:100vh;overflow: hidden;
  background-image:linear-gradient(135deg,#f8c261,#f1efe1);">
        <el-container style="padding:30px;">
            <el-header>
                <el-row>
                    <el-col :span="4">
                        <span style="font-size: 30px;font-weight: bolder;font-family: 华文彩云;color: #fff;">吃了吗郑州分部</span>
                    </el-col>
                    <el-col :span="1">
                        <img src="/imgs/login/verticalLine.png" style="height: 50px;width: 100%;">
                    </el-col>
                    <el-col :span="19">
                        <span style="font-size: 30px;font-weight: bolder;font-family: 华文彩云;color: #fff;">线上餐厅管理系统</span>
                    </el-col>
                </el-row>
            </el-header>

        </el-container>
        <div style="display:flex;align-items: center;justify-content: center;margin-top: 80px"><!--align-items: center：垂直居中；justify-content: center:横向居中-->
            <div style="display: flex;">
                <div style="flex: 1">
                    <img src="/imgs/login/img.png" style="width:400px;">
                </div>
                <div style="flex: 1;margin-right: 0">
                    <el-card style="width:400px;height: 400px;box-sizing: border-box;border: none;border-radius: 0;">
                        <h3 style="text-align: center">欢迎注册</h3>
                        <el-form
                                ref="formRef"
                                label-width="auto"
                                status-icon
                                :rules="rules"
                                :model="userInfo" label-position="left">
                            <el-form-item prop="username" label="用户名">
                                <el-input  v-model="userInfo.username" placeholder="请输入用户名"></el-input>
                            </el-form-item>
                            <el-form-item prop="phone" label="手机号">
                                <el-input v-model="userInfo.phone" placeholder="请输入手机号"></el-input>
                            </el-form-item>
                            <el-form-item prop="password" label="密码">
                                <el-input v-model="userInfo.password" type="password" placeholder="请输入密码"></el-input>
                            </el-form-item>
                            <el-form-item prop="passwordTwo" label="确认密码">
                                <el-input v-model="userInfo.passwordTwo" type="password" placeholder="请再次输入密码"></el-input>
                            </el-form-item>
                            <el-form-item prop="validateCode" label="验证码">
                                <el-input placeholder="请输入验证码"  v-model="userInfo.validateCode" clearable></el-input>
                            </el-form-item>
                            <div style="display: flex">
<!--                                <SIdentify @click="refreshCode" :identifyCode="identifyCode"></SIdentify>-->
                                <ValidateCode ref="ref_validateCode" @change="changeCode" style="margin-left: 20px;height: 36px"/>
                                <el-button type="primary" @click="submitFrom()" style="margin-left:100px;margin-top:10px;width: 80px;">注册</el-button>
                                <el-button type="primary" @click="router.push('/login')" style="margin-left:10px;margin-top:10px;width: 80px;" link>返回</el-button>
                            </div>
                        </el-form>
                    </el-card>

                </div>
            </div>

        </div>

    </div>
</template>
<script setup>



import SIdentify from '@/components/Sidentify'
import ValidateCode from "@/components/ValidateCode.vue";
import  { ElMessage} from 'element-plus'
import {ref, onMounted, reactive} from 'vue'
import { useRouter } from 'vue-router'
import qs from "qs";
import axios from "axios";

const ref_validateCode = ref(null)
let genderCode = ''
const changeCode = (value)=>{
    genderCode = value
}

const rules = reactive({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, max: 8, message: '用户名长度在3-8位之间', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 12, message: '密码长度在6-12位之间', trigger: 'blur' }
  ],
  passwordTwo: [
    { required: true, message: '确认密码不能为空', trigger: 'blur' },
    { validator: (rule, value, callback) => {
        if (value !== userInfo.value.password) {
          return callback(new Error('两次密码不一致'))
        } else {
          return callback()
        }
      }}
  ],
    validateCode:[{ required: true, message: '验证码不能为空', trigger: 'blur' }]
})

const formRef = ref()


//获取路由器
let router = useRouter()
let sidentifyMode = ref('') //输入框验证码
let identifyCode = ref('') //图形验证码
let identifyCodes = ref('1234567890abcdef') //验证码出现的数字和字母

//定义数组用来保存用户注册时输入的信息
const userInfo = ref({
  username: '',//用户名
  phone: '',//手机号
  password: '',//密码1
  passwordTwo: '', //密码2
    validateCode:''
})



//组件挂载
onMounted(() => {

  sidentifyMode.value = ''
  identifyCode.value = ''
  makeCode(identifyCodes.value, 4)
  refreshCode()
})

// 生成随机数
const randomNum = (min, max) => {
  max = max + 1
  return Math.floor(Math.random() * (max - min) + min)
}
// 随机生成验证码字符串
const makeCode = (o, l) => {
  identifyCode.value = ''
  for (let i = 0; i < l; i++) {
    identifyCode.value += o[randomNum(0, o.length)]
  }
  console.log(identifyCode)
}
// 更新验证码
const refreshCode = () => {
    makeCode(identifyCodes.value, 4)
}
//登录
const submitFrom =  () => {

    formRef.value.validate((valid)=>{
        if(!valid){
            ElMessage("请检查输入信息")
        }else{
            if(userInfo.value.validateCode.toUpperCase() === genderCode) {
                ElMessage.success('验证成功')
                let data = qs.stringify(userInfo.value);
                axios.post(BASE_URL+'/v1/user/singLn',data)
                    .then((response)=>{
                        if (response.data.code == 5003){
                            ElMessage.error('用户名已存在');
                        }
                        if(response.data.code == 2000){
                            ElMessage.success('注册成功!');
                            router.push('/login')
                        }else{
                            ElMessage.error("注册失败");
                        }
                    })
            }else {
                ElMessage.error('验证码输入错误')
                ref_validateCode.value.draw();//刷新验证码
                userInfo.value.validateCode=''
            }

        }
    })



}
</script>
<style scoped></style>